<template>
	<view class="roof-placement" :style="{ 'margin-top': statusBarHeight + 'px'}">
		<view class="roof-placement-conter">
			<image class="roof-placement-icon" src="../../../static/images/roof_placement.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
		},
		components: {},
		data() {
			return {
				statusBarHeight: 0
			}
		},
		watch: {},
		computed: {},
		methods: {},
		created() {},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
	}
</script>

<style lang="scss" scoped>
	.roof-placement {
		position: fixed;
		top: 0;
		left: 0;
		height: 64rpx;
		z-index: 500;
	}

	.roof-placement-conter {
		position: relative;
		left: 230rpx;
		opacity: 0;
		animation: fadeio 4s 1;
		-webkit-animation: fadeio 4s 1;
		-moz-animation: fadeio 4s 1;
		-o-animation: fadeio 4s 1;
	}

	.roof-placement-icon {
		width: 328rpx;
		height: 62rpx;
	}

	@keyframes fadeio {

		/*设置内容由显示变为隐藏*/
		0% {
			opacity: 0;
		}
		
		1% {
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@-moz-keyframes fadeio {

		/*设置内容由显示变为隐藏*/
		0% {
			opacity: 0;
		}
		
		1% {
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@-webkit-keyframes fadeio {

		/*设置内容由显示变为隐藏*/
		0% {
			opacity: 0;
		}
		
		1% {
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@-o-keyframes fadeio {

		/*设置内容由显示变为隐藏*/
		0% {
			opacity: 0;
		}
		
		1% {
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>
